import { Injectable } from '../decorators/inject';
import { RenderTrigger } from './render-trigger';
import { ColHeader } from './col-header';
import { RowHeader } from './row-header';
import { TableBackGround } from './table-background';
import { Corner } from './corner';
import { DataRender } from './data-render';
import { Hook } from './hook';
import { TableEvent } from './table-event';
import { FreezeRender } from './freeze-render';
import { Config } from './config';
import { CellRenderEditManage } from './cell-render-edit-manage';
import { CellTypeManage } from './cell-type-manage';
import { v4 } from 'uuid';

@Injectable('View')
export class View {
    protected _visible: boolean = false;
    public set visible(val: boolean) {
        this._visible = val;
        if(val == true) {
            this.render();
            this.renderTrigger.triggerRenderAll();
        }
    }
    public get visible() {
        return this._visible;
    }
    protected colHeaderRenderCount: number = 0;
    protected rowHeaderRenderCount: number = 0;
    protected bgBodyRenderCount: number = 0;
    protected styleRenderCount: number = 0;
    protected dataRenderCount: number = 0;
    protected coverRenderCount: number = 0;
    protected refreshCount: number = 0;
    constructor(
        protected renderTrigger: RenderTrigger,
        protected colHeader: ColHeader,
        protected rowHeader: RowHeader,
        protected tableBg: TableBackGround,
        protected corner: Corner,
        protected dataRender: DataRender,
        protected hook: Hook,
        protected tableEvent: TableEvent,
        protected freezeRender: FreezeRender,
        protected conf: Config,
        protected renderManage: CellRenderEditManage,
        protected cellTypeManage: CellTypeManage
    ) {
        // setInterval(() => {this.renderTrigger.refresh$.next()}, 10);
    }
    init() {
        this.renderTrigger.colHeaderRender$.subscribe(() => {
            this.colHeaderRenderCount++;
            requestAnimationFrame(() => {
                this.render();
            });
        });
        this.renderTrigger.rowHeaderRender$.subscribe(() => {
            this.rowHeaderRenderCount++;
            requestAnimationFrame(() => {
                this.render();
            });
        });
        this.renderTrigger.bgBodyRender$.subscribe(() => {
            this.bgBodyRenderCount++;
            requestAnimationFrame(() => {
                this.render();
            });
        });
        this.renderTrigger.styleRender$.subscribe(() => {
            this.styleRenderCount++;
            requestAnimationFrame(() => {
                this.render();
            });
        });
        this.renderTrigger.dataRender$.subscribe(() => {
            this.dataRenderCount++;
            requestAnimationFrame(() => {
                this.render();
            });
        });
        this.renderTrigger.coverRender$.subscribe(() => {
            this.coverRenderCount++;
            requestAnimationFrame(() => {
                this.render();
            });
        });
        this.renderTrigger.refresh$.subscribe(() => {
            this.colHeaderRenderCount = 0;
            this.rowHeaderRenderCount = 0;
            this.bgBodyRenderCount = 0;
            this.styleRenderCount = 0;
            this.dataRenderCount = 0;
            this.coverRenderCount = 0;
            this.refreshCount++;
            
            requestAnimationFrame(() => {
                this.conf.currentRenderId = v4();
                this.render();
            });
        });
        this.tableEvent.tableResize$.subscribe(() => {
            requestAnimationFrame(() => {
                this.renderTrigger.refresh$.next();
            })
        });
    }
    render() {
        this.hook.beforeRender.excute(new Date().getTime());
        if(this.visible == false) {
            return false;
        }
        if(this.colHeaderRenderCount != 0 || this.rowHeaderRenderCount != 0) {
            this.corner.render();
        }
        if(this.colHeaderRenderCount != 0) {
            this.colHeader.render();
            this.colHeaderRenderCount = 0;
        }
        if(this.rowHeaderRenderCount != 0) {
            this.rowHeader.render();
            this.rowHeaderRenderCount = 0;
        }
        if(this.bgBodyRenderCount != 0) {
            this.tableBg.render();
            this.bgBodyRenderCount = 0;
        }
        if(this.styleRenderCount != 0) {
            this.styleRenderCount = 0;
        }
        if(this.dataRenderCount != 0) {
            this.freezeRender.render();
            this.dataRender.render();
            this.dataRenderCount = 0;
        }
        if(this.colHeaderRenderCount != 0) {
            this.coverRenderCount = 0
        }
        if(this.refreshCount !== 0) {
            let startTime = new Date().getTime();
            this.corner.render();
            this.colHeader.render();
            this.rowHeader.render();
            this.tableBg.render();
            this.dataRender.render();
            this.freezeRender.render();
            this.refreshCount--;
            this.hook.renderTime.excute(new Date().getTime() - startTime);
        }
        if(
            this.colHeaderRenderCount != 0
            || this.rowHeaderRenderCount != 0
            || this.bgBodyRenderCount != 0
            || this.styleRenderCount != 0
            || this.dataRenderCount != 0
            || this.colHeaderRenderCount != 0
            || this.refreshCount !== 0
        ) {
            // window.requestAnimationFrame(this.render.bind(this));
        }
        this.hook.afterRender.excute(new Date().getTime());
    }
}